<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>35.VUEJS数据绑定的容器更新</title>
  <style>
    body {
      padding: 50px;
      background: #34495e;
    }

    input {
      border: solid 10px #ddd;
      height: 30px;
    }

    .error {
      border: solid 10px red;
    }
  </style>
</head>

<body>
  <input type="text" v-model="title" />
  <input type="text" v-model="title" />
  <h4 v-bind="title">这里也会发生更新</h4>
  <script>
    function View () {
      let proxy = new Proxy(
        {},
        {
          get (obj, property) { },
          set (obj, property, value) {
            console.log(value);
          }
        }
      );

      this.init = function () {
        const els = document.querySelectorAll('[v-model]');
        els.forEach(item => {
          item.addEventListener('keyup', function () {
            proxy[this.getAttribute('v-model')] = this.value;
          });
        })
      }
    }
    let view = new View().init();
  </script>
</body>

</html>